body {
    margin: 0;
    padding: 20px;
    background-color: #f5f5f5;
}

.container {
    width: max-content; /* 左对齐关键 */
}

.cell {
    display: inline-block;
    border: 1px solid #666;
    padding: 3px 8px;
    margin: 1px;
    font-size: 12px;
    transition: all 0.2s; /* 平滑过渡效果 */
}

/* 定义多组不同的hover颜色（可根据需要增减） */
.cell.color-1:hover {
    background-color: #ff4444; /* 红色背景 */
    color: white; /* 白色文字 */
}
.cell.color-2:hover {
    background-color: #00C851; /* 绿色背景 */
    color: black; /* 黑色文字 */
}
.cell.color-3:hover {
    background-color: #33b5e5; /* 蓝色背景 */
    color: yellow; /* 黄色文字 */
}
.cell.color-4:hover {
    background-color: #ffbb33; /* 橙色背景 */
    color: purple; /* 紫色文字 */
}
.cell.color-5:hover {
    background-color: #9933cc; /* 紫色背景 */
    color: pink; /* 粉色文字 */
}